onload = function() {
	var c = new Cells(2);
	var cells = c.getCells();
	for (var x=0; x<9; x++) {
		console.log(cells[x]);
	}
	
	var _row, _column, _cell;
	
	for (var x=0; x<9; x++) {
		for (var y=0; y<9; y++) {
			if (typeof cells[x][y] === 'number') {
				_(".r" + x).filter();
				_cell = _(".r" + x).leach(".c" + y);
				_cell.val(cells[x][y]).addClass('known').attr('readonly','true').css("border", "2px solid #AAA").css("background-color");
			} else {
				_cell = _(".r" + x).leach(".c" + y);
				_cell.val('').addClass('unknown').css("border", "2px solid #06AAD3");
			}
			_cell.attr({row:x.toString(), column:y.toString()});
		}
	}
	
	_(".cell").bind('change', function(){
		c.setCell(parseInt(_(this).attr('column')), parseInt(_(this).attr('row')), parseInt(this.value));
		var result = c.check();
		if (result) {
			console.log("finish");
			_(".cellsFrame").css({border:"5px double green", margin:"0"});
		}
	}).bind('click', function(){
		_(this).filter();
		//highLight(this);
	}).bind('blur', function(){
		//resume(this);
	});
	
	function highLight(elem) {
		_elem = _(elem);
		// high light row
		_('.r' + _elem.attr('row')).css("background", "#EEE");
		// high light column
		_('.c' + _elem.attr('column')).css("background", "#EEE");
		// high light sub cells
		_elem.parent(3).find('input').css("background", "#EEE");
		// high light selected number
		_('input[value="' + _elem.val() + '"]').css("background", "#EEE");
	}
	function resume(elem) {
		_elem = _(elem);
		// resume row
		_('.r' + _elem.attr('row')).css("background", "#FFF");
		// resume column
		_('.c' + _elem.attr('column')).css("background", "#FFF");
		// resume sub cells
		_('input[value="' + _elem.val() + '"]').css("background", "#FFF");
	}
}
